<template>

  <el-input class="input" v-model="searchWord">
    <template #prepend>
      <el-select v-model="selectedOption" style="width: 100px">
        <el-option
            v-for="option in options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
        />
      </el-select>
    </template>
    <template #append>
      <el-button @click="searchOnClick">
        <template #icon>
          <el-icon><Search /></el-icon>
        </template>
      </el-button>
    </template>
  </el-input>
</template>

<script>
import { ElSelect, ElInput, ElButton } from "element-plus";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

export default {
  name: "SearchBox",
  components: {
    ElSelect,
    ElInput,
    ElButton
  },
  data() {
    return {
      options: [
        {value: "recruit", label: "搜职位"},
        {value: "enterprise", label: "搜企业"},
        {value: "user", label: "搜用户"},
      ],
      selectedOption: "user",
      searchWord: "",
    }
  },
  methods: {
    searchOnClick() {
      if (this.searchWord) {
        this.$router.push({
          path: `/search`,
          query: {
            word: this.searchWord,
            type: this.selectedOption,
          }
        });
      }
      else {
        ElMessage.error('请输入搜索关键字');
      }
    }
  }
}
</script>

<style scoped>
.select {
  width: 120px;
  padding: 0;
  margin-left: 10px;
}
.input {
  width: 350px;
}
</style>